<template>
	<Grid :col="3" :border="false" padding="5px">
	  <GridItem> <Input  placeholder="请输入用户名" v-model="search.username" /></GridItem>
	  <GridItem><Input  placeholder="请输入真实姓名" v-model="search.realName" /></GridItem>
	  <GridItem>
		  <Select style="width:100%" clearable  placeholder="请选择用户的状态" v-model="search.state">
			  <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
		  </Select>
	  </GridItem>
	  <GridItem><Input  placeholder="请输入手机号" v-model="search.tel"/></GridItem>
	  <GridItem> <DatePicker type="daterange" v-model="search.time" confirm placement="bottom-end" placeholder="请选择入职时间" style="width: 100%;"/></GridItem>
	  <GridItem><Button v-auth:user:query icon="md-search" type="primary" @click="handleSearch">查询</Button></GridItem>
	</Grid>
	
	<Grid :col="1" :border="false" padding="5px">
	  <GridItem><Button v-auth:user:add icon="md-add-circle" type="primary" @click="$emit('add-user')">新增用户</Button></GridItem>
	</Grid>
</template>

<script>

export default {
  props: ["modelValue"] ,
	data() {
		return {
      search: {username: "", realName:"", state: null, tel: "", time: ["", ""]},
			statusList: [{label: '正常',  value: 1},  {label: '锁定', value : 0}]
		}
	},
	emits: ['add-user', "update:model-value", "search"] ,
  methods: {
    handleSearch() {
       this.$emit("update:model-value",  {...this.search, start: this.startTime, end: this.endTime}) ;
       this.$emit("search") ;
    }
  },
  computed: {
    startTime() {
       let start = this.search.time[0] ;
       if (start != "") {
          return this.$Date(start).format("YYYY-MM-DD");
       }
       return null ;
    },
    endTime() {
      let end = this.search.time[1] ;
      if (end != "") {
        return this.$Date(end).format("YYYY-MM-DD");
      }
      return null ;
    }
  }
}

</script>

<style>
</style>